<template>
  <div class="login">
    <div class="login-content">
      <div class="login-title">账号登录</div>
      <a-form class="login-form" ref="formLogin" :form="form" @submit="handleSubmit">
        <a-form-item>
          <a-input
            size="large"
            type="text"
            placeholder="账号"
            autocomplete
            v-decorator="[
              'username',
              {
                rules: [{ required: true, message: '请输入帐户名' }, { validator: handleUsernameOrEmail }],
                validateTrigger: 'change',
              },
            ]"
          >
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-input-password
            size="large"
            placeholder="密码"
            v-decorator="[
              'password',
              { rules: [{ required: true, message: '请输入密码！' }], validateTrigger: 'blur' },
            ]"
            autocomplete
          >
          </a-input-password>
        </a-form-item>

        <a-form-item style="margin-top: 30px; margin-bottom: 16px">
          <a-button
            size="large"
            type="primary"
            htmlType="submit"
            class="login-button"
            :loading="state.loginBtn"
            :disabled="state.loginBtn"
          >
            登录
          </a-button>
          <a-button size="large" type="" class="forget-button" @click="forgetPwd()"> 忘记密码?</a-button>
          <a-button size="large" type="" class="reg-button" @click="register()"> 注册 </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import { timeFix } from '@/utils/util'
import { getCurrentUser } from '@/utils/auth'
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      state: {
        time: 60,
        loginBtn: false,
        loginType: 0,
        smsSendBtn: false,
      },
      loginFlg: 0, //登录状态
    }
  },
  created() {
    this.loginFlg = localStorage.getItem('loginFlg')
  },
  methods: {
    // 注册
    register() {
      // 跳转 注册页面
    },
    // 忘记密码
    forgetPwd() {
      // 跳转 忘记密码
    },
    //账号正则校验
    handleUsernameOrEmail(rule, value, callback) {
      const { state } = this
      const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
      if (regex.test(value)) {
        state.loginType = 0
      } else {
        state.loginType = 1
      }
      callback()
    },
    //登录按钮
    handleSubmit(e) {
      e.preventDefault()
      const {
        form: { validateFields },
        state,
      } = this
      state.loginBtn = true

      const validateFieldsKey = ['username', 'password']
      validateFields(validateFieldsKey, { force: true }, (err, values) => {
        if (!err) {
          if (this.loginFlg == 1) {
            state.loginBtn = true
          } else {
            const loginParams = {
              username: values.username,
              password: values.password,
            }
            this.$store
              .dispatch('user/login', loginParams)
              .then(() => {
                this.loginFlg = 0
                localStorage.setItem('loginFlg', 0)
                this.loginSuccess()
                state.loginBtn = false
              })
              .catch((error) => {
                //错误提示
                this.$notification.error({
                  top: '100px',
                  message: '提示',
                  description: error.message,
                })
                state.loginBtn = false
              })
          }
        } else {
          state.loginBtn = false
        }
      })
    },
    //提示
    loginSuccess() {
      this.$router.push({ path: '/' })
      // 延迟 1 秒显示欢迎信息
      setTimeout(() => {
        this.$notification.success({
          top: '100px',
          message: '欢迎',
          description: `${timeFix()}，欢迎回来`,
        })
      }, 1000)
    },
  },
}
</script>

<style lang="less" scoped>
.login {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-content {
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    width: 457px;
    height: 420px;
    transition: all 0.3s;
    transform: translateX(0);
    .login-title {
      margin-bottom: 25px;
      font-size: 36px;
      text-align: center;
      font-weight: bold;
      color: #000;
    }
    .login-form {
      /deep/.ant-form-item {
        margin-bottom: 45px;
        .ant-form-item-control {
          width: 407px;
          margin: 0 auto;
          .ant-input {
            height: 70px;
            font-size: 26px;
            color: #000;
            background-color: transparent;
            border: 2px solid #d9d9d9;
            opacity: 1;
            border-radius: 10px;
            &:-internal-autofill-previewed,
            &:-internal-autofill-selected {
              -webkit-text-fill-color: #000 !important;
              transition: background-color 5000s ease-in-out 0s !important;
            }
          }
        }
      }
    }
    .login-button {
      margin-top: 14px;
      width: 164px;
      height: 60px;
      background-color: #3a5dea;
      border-color: #3a5dea;
      border-radius: 30px;
      font-size: 24px;
      margin-right: 15px;
    }
    .forget-button,
    .reg-button {
      border: none;
      background-color: rgba(0, 0, 0, 0);
      color: #3a5dea;
      height: 20px;
      position: relative;
      top: 10px;
    }
  }
}
</style>
